<template>
  <div id="role" class="container">
    <h3 class="title"><span />角色管理</h3>
    <div class="content">
      <div class="left">
        <div class="leftTop">
          <h4>角色列表</h4>
          <el-button
            size="small"
            class="add four"
            type="primary"
            icon="el-icon-plus"
            @click="goAdd"
          >新增角色</el-button>
        </div>
        <BouncedDialog title="添加角色" :dialog-show.sync="dialogShow" :width="50" class="columnDialog">
          <el-form ref="addForm" :model="addForm" :rules="rules" inline label-width="80px">
            <el-form-item label="角色名:" prop="title">
              <el-input v-model="addForm.title" />
            </el-form-item>
            <div class="btn">
              <el-button @click="dialogShow = false">取 消</el-button>
              <el-button type="primary" @click="submit()">确 定</el-button>
            </div>
          </el-form>
        </BouncedDialog>
        <ul class="leftNavcate">
          <li
            v-for="item in roleData"
            :key="item.id"
            :class="activeId== item.id? 'activeitem':''"
          >
            <span class="navtitle" @click="changerole(item)">{{ item.title }}</span>
            <div class="icon">
              <i v-if="item.id != 1" class="el-icon-delete" @click="delerole(item)" />
            </div>
          </li>
        </ul>
      </div>
      <div class="right">
        <h4>角色详情</h4>
        <el-tree
          ref="tree"
          :data="menuData"
          show-checkbox
          node-key="id"
          :default-expanded-keys="defaultExpand"
          :default-checked-keys="defaultKeys"
          :props="defaultProps"

          @check="getNode"
        />
        <div v-if="updateForm.id != 1" class="update">
          <el-form :data="updateForm" inline>
            <el-form-item label="角色名称">
              <el-input v-model="updateForm.title" size="small" />
            </el-form-item>
            <el-form-item>
              <el-switch
                v-model="updateForm.status"
                active-text="启用"
                inactive-text="禁用"
                :active-value="1"
                :inactive-value="2"
                active-color="#f84311"
                inactive-color="rgba(0,0,0,0.2)"
              />
            </el-form-item>
            <el-button type="primary" class="save" size="small" style="margin-left:20px" @click="saveEdit">保存</el-button>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import rolesApi from '@/api/admin.js'
export default {
  data() {
    return {
      roleData: [],
      activeId: '1',
      role_id: '',
      roleAuth: '',
      menuData: [], // 所有菜单
      defaultProps: {
        label: 'title',
        children: 'children'
      },
      defaultKeys: [], // 默认选中的节点
      defaultExpand: [], // 默认展开的节点
      addForm: {
        title: ''
      },
      rules: {
        title: [
          { required: 'true', message: '请输入角色名', trigger: 'blur' }
        ]
      },
      dialogShow: false,
      updateForm: {}
    }
  },
  created() {
    this.getList()
  },
  updated() {

  },
  methods: {
    // 获取所有权限列表
    getMenu() {
      rolesApi.roleAuth().then(res => {
        this.menuData = res.data
        this.$nextTick(() => {
          this.getRoleInfo(this.roleData[0])
        })
        // this.getCheckedKeys()
      })
    },
    // 切换角色
    changerole(val) {
      this.getRoleInfo(val)
      this.activeId = val.id
    },
    // 角色详情
    getRoleInfo(row) {
      rolesApi.roleInfo({ id: row.id }).then(res => {
        if (row.id == 1) {
          this.$refs.tree.setCheckedNodes(this.menuData)
        } else {
          this.$refs.tree.setCheckedKeys([])

          // const arr = row.auth.split(',')
          this.defaultKeys = res.data.auth
          this.$refs.tree.setCheckedKeys(res.data.auth)
        }

        this.updateForm = {
          title: res.data.title,
          status: res.data.status,
          id: res.data.id,
          group: res.data.group
        }
      })
    },
    getNode(val, value) {
      this.updateForm.auth = value.checkedKeys
    },
    saveEdit() {
      rolesApi.roleUpdate(this.updateForm).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.getRoleInfo(this.updateForm)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 角色列表
    getList() {
      rolesApi.roleList(this.val).then(res => {
        this.roleData = res.data.reverse()
        this.getMenu()
        // this.page.total = res.count
      })
    },

    // 获取选中的菜单key
    getCheckedKeys() {
      // this.menu_ids = this.$refs.tree.getCheckedKeys()
    },
    // 提交设置的菜单
    submitMenu() {
      this.getCheckedKeys()
      const val = {
        role_node: this.menu_ids.toString(),
        role_name: this.roleForm.role_name
      }
      if (!this.role_id) {
        rolesApi.roleSave(val).then(res => {
          if (res.code == 0) {
            this.$message.success(res.msg)
            this.dialogMenu = false
            this.getList()
          } else {
            this.$message.error(res.msg)
          }
        })
      } else {
        const val = {
          role_node: this.menu_ids.toString(),
          role_name: this.roleForm.role_name,
          role_id: this.role_id
        }
        rolesApi.roleUpdate(val).then(res => {
          if (res.code == 0) {
            this.$message.success(res.msg)
            this.dialogMenu = false
            this.getList()
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },

    // 新增
    goAdd() {
      this.addForm.title = ''
      this.dialogShow = true
    },
    submit() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          rolesApi.roleSave(this.addForm).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.dialogShow = false
              this.getList()
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          this.$message.error('请填写必要信息')
        }
      })
    },
    // 编辑
    // goEdit(row) {
    //   this.role_id = row.role_id
    //   // this.getRoleInfo()
    //   this.role_name = row.role_name
    // },
    // 获取角色信息
    // getRoleInfo() {
    //   rolesApi.getRoleInfo({ role_id: this.role_id }).then(res => {
    //     this.roleForm.role_name = res.data.role_name
    //     if (res.data.role_node) {
    //       const arr = (res.data.role_node).split(',')
    //       this.checkedId = arr
    //     }
    //     // this.checkedId = res.data.role_node
    //     this.$nextTick(() => { this.$refs.tree.setCheckedKeys(this.checkedId) })
    //   })
    // },
    // 删除
    delerole(row) {
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        rolesApi.roleDelete({ id: row.id }).then(res => {
          if (res.code == 0) {
            this.$message.success(res.msg)
            this.getList()
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 搜索
    search() {
      this.$refs.searchForm.validate((valid) => {
        this.page.currentPage = 1
        // this.getList()
      })
    },

    // 重置搜索框
    reset(searchForm) {
      this.searchForm = {
        admin_name: ''
      }
    },
    // 分页规格改变
    handleSizeChange(val) {
      this.page.size = val
      this.page.currentPage = 1
      this.getList()
    },
    // 分页点击
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    }
  }
}
</script>

<style lang="scss">
  #role{
    .el-form-item{
      width: 100%;
    }
    .el-form--inline .el-form-item__content{
      width: calc(100% - 80px);
    }
  }
</style>
<style lang="scss" scoped>
.container{
  margin-bottom: 40px;
}
.content{
  display: flex;
  justify-content: left;
  .left{
    width: 270px;
    background-color: #fff;
    margin-right: 30px;
    border: solid 1px #eee;
    border-radius: 5px;
    .leftTop{
      height: 60px;
      border-bottom: solid 1px #eee;
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .leftNavcate{
    list-style: none;
    margin-top: 20px;
    li.navtitle{
      font-size: 15px;
      font-weight: bold;
    }
    li{
      width: 220px;
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .navtitle{
        cursor: pointer;
      }

      .icon{
        display: none;
        i{
          cursor: pointer;
        }
        .el-icon-delete{
          margin-right: 10px;
        }
      }

    }
    .activeitem .icon{
        display: block;
      }
    // hover的样式
    li:hover{
      color: #f84311 ;
      background-color: #f4f8fc;
      .icon{
        display: block;
      }
    }
    //选中的样式
    li.activeitem{
      color: #f84311 ;
      background-color: #f4f8fc;
    }
}
  }
  .right{
    width: calc(100% - 300px);
    background-color: #fff;
    border: solid 1px #eee;
    border-radius: 5px;
    h4{
      line-height: 60px;
      border-bottom: solid 1px #eee;
      padding-left: 15px;
    }
    .el-tree{
      margin-top: 20px;
      margin-left: 15px;
    }
    .update{
      margin: 50px 0 10px 20px;
    }
  }
}
</style>
